#include("../_common/_header.html")
#include("../_common/_footer.html")
#include("../_common/_navTop.html")
#include("../_common/search.html")
#include("../_common/catelog.html")
#include("../_common/article.list.timeline.html")
#@_header(viewPath, '', '')
#@_navTop()
<div class="layui-container content-front">
  <div class="layui-row">
    <div class="layui-col-md8 layui-col-xs12" style="margin-top: 30px;">
      <!--<fieldset class="layui-elem-field layui-field-title">-->
        <!--<legend>时间线</legend>-->
      <!--</fieldset>-->
      <ul id="mainContent" class="layui-timeline"></ul>
    </div>
    <div class="layui-col-md3 layui-col-md-offset1 layui-hide-xs">
      <div style="margin-top: 30px;">#@search()</div>
      <div style="margin-top: 30px;">#@catelog()</div>
    </div>
  </div>
</div>
<script type="text/javascript">
    layui.use('flow', function () {
        var flow = layui.flow;
        flow.load({
            elem: '#mainContent' // 追加内容的容器
            , mb: 200
            , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                removeLastItem('mainContent');
                var lis = [];
                $.get('#(apiPath)/' + page, function (ret) {
                    //假设你的列表返回在data集合中
                    layui.each(ret.data, function (index, item) {
                        lis.push(createItem(item));
                    });
                    if (page >= ret.totalPage) {
                        lis.push(createLastLi());
                    }
                    else {
                        lis.push(createMoreLi());
                    }
                    next(lis.join(''), page < ret.totalPage);
                });
            }
        });

        function createItem(item) {
            var dateStr = item.update_time;
            var dateArr = dateStr.split(/[- :\/]/);
            var date = new Date(dateArr[0], dateArr[1] - 1, dateArr[2], dateArr[3], dateArr[4], dateArr[5]); // 兼容safari
            var datetime = "";
            if (date.getFullYear() < new Date().getFullYear()) {
                datetime += date.getFullYear() + '-';
            }
            datetime += date.getMonth() + 1 + '-';
            datetime += date.getDate() + '';
            var html = '<li class="layui-timeline-item">';
            html += '<i class="layui-icon layui-timeline-axis">&#xe625;</i>';
            html += '<div class="layui-timeline-content layui-text">';
            html += '<h3 class="layui-timeline-title"><font class="font-quicksand" size=+1>' + datetime + '</font></h3>';
            html += '<blockquote class="layui-elem-quote">';
            html += '<p>' + item.content + '</p>';
            html += '<div style="text-align:right;">' + item.author + '</div>';
            html += '<div style="text-align:right;">' + item.remark + '</div>';
            html += '</blockquote>';
            html += '</div>';
            html += '</li>';
            return html;
        }

        /**
         * 创建最后的结束节点
         * @return {[type]} [description]
         */
        function createLastLi() {
            var html = '<li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis layui-bg-green"></i></li>';
            return html;
        }

        /**
         * 创建当前页结尾的结束节点
         * @return {[type]} [description]
         */
        function createMoreLi() {
            var html = '<li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis">&#xe61a;</i></li>';
            return html;
        }

        /**
         * 删除最后一个节点
         * @param  {String} eId 父节点元素id
         * @return {void}
         */
        function removeLastItem(eId) {
            var ul = document.getElementById(eId);
            var childs = ul.childNodes;
            if (childs.length > 1) {
                // 这里要是倒数第二个，因为最后的一个是那个按钮的节点
                ul.removeChild(childs[childs.length - 2]);
            }
        }
    });
</script>
#@_footer()
